<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <!--
    <script type="text/javascript" src="http://svg-visualization.googlecode.com/svn/trunk/pelota.js"></script>
    <script type="text/javascript" src="http://svg-visualization.googlecode.com/svn/trunk/polarchart.js"></script>
    -->
    <script type="text/javascript" src="pelota.js"></script>
    <script type="text/javascript" src="polarchart.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 

      // Called when the Visualization API is loaded.
      function drawVisualization() {
        
        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'x1');
        data.addColumn('number', 'y1');
        data.addRows(2);
        data.setCell(0, 0, -50 + 100 * Math.random()); data.setCell(0, 1, -50 + 100 * Math.random());
        data.setCell(1, 0, -50 + 100 * Math.random()); data.setCell(1, 1, -50 + 100 * Math.random());

/*
        var pelota_1 = new LuisVielva_svg_visualization.Pelota(document.getElementById('pelota_1'));
        pelota_1.draw(data, {color: 'blue', radius: 50, caption: 'Hola'});
        
        (new LuisVielva_svg_visualization.Pelota(document.getElementById('pelota_2'))).draw(data, {color: 'red', radius: 80});
*/
        (new LuisVielva_svg_visualization.PolarChart(document.getElementById('pelota_3'))).draw(data, {color: 'lime', radius: 80, caption: null});

	setTimeout('drawVisualization()', 500);
       }
   </script>
  <title>example page</title></head>
  <body>
    <div id="pelota_1" style="position: absolute; left: 100; top: 100"></div>
    <div id="pelota_2" style="position: absolute; left: 150; top: 120"></div>
    <div id="pelota_3" style="position: absolute; left: 170; top: 140"></div>
  </body>
</html>
